<template>
  <Codemirror
    v-model:value="textvaule"
    :options="cmOptions"
    border
    placeholder="测试 placeholder"
    :height="550"
    @change="onChange"
  />
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import Codemirror from 'codemirror-editor-vue3'
import 'codemirror/mode/javascript/javascript.js'

export default defineComponent({
  components: { Codemirror },
  setup() {
    const textvaule = ref()

    return {
      textvaule,
      cmOptions: {
        mode: 'text/javascript', // 语言模式
        theme: 'default', // 主题
        lineNumbers: true, // 显示行号
        smartIndent: true, // 智能缩进
        indentUnit: 2, // 智能缩进单位为4个空格长度
        foldGutter: true, // 启用行槽中的代码折叠
        styleActiveLine: true // 显示选中行的样式
      },
      onChange(val: any, cm: any) {
        console.log('change')
      }
    }
  }
})
</script>

<style scoped>
:deep(.codemirror-container) {
  padding: 0 10px;
}
</style>
